<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="a" style="margin-bottom: 200px">
    <fieldset>
        <legend>if: 注册</legend>
        <a @click="flag='email'">邮件注册</a>
        <a @click="flag='phone'">手机注册</a>
        <a @click="flag='chat'">微信注册</a>
        使用key给控件加唯一标识，避开控件缓存
        <div v-if="flag == 'email'">
            邮箱号码：<input key="1">
        </div>
        <div v-else-if="flag == 'phone'">
            手机号码：<input key="2">
        </div>
        <div v-else>
            微信号码：<input key="3">
        </div>
    </fieldset>

    <fieldset>
        <legend>show: 成绩</legend>
        分数：<input type="number" v-model="score">
        <span v-show="score < 60">不及格</span>
        <span v-show="score >= 60 && score < 80">及格</span>
        <span v-show="score >= 80 && score < 90">良好</span>
        <span v-show="score >= 90">优秀</span>
    </fieldset>
</div>
<script>
    var v = new Vue({
        el : "#a",
        data : {
            flag : "email",
            score : 0,
            likeItems : ['篮球','电影','手游','看书'],
            hero : {
                name : "武松",
                gender : "男",
                age : 28
            }
        }
    })
</script>
</body>
</html>